<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <SplitScreen/>
            </n-icon>
            <Handle id="DataSplit-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="DataSplit-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>数据拆分</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
            <n-card title="数据拆分">
                <p>选择列： </p>
                <n-select
                    v-model:value="field"
                    :options="props.data.data.title"
                    @update:value="popup.reopen"
                    placeholder="选择列"
                    label-field="title"
                    value-field="key"
                />
                <p>拆分方式： </p>
                <n-select
                    v-model:value="splittingMethod"
                    :options="splittingMethodArray"
                    @update:value="popup.reopen"
                    placeholder="拆分方式"
                />

                <div v-show="splittingMethod==='delimiter'">
                    <p>分隔符：</p>
                    <n-select
                        v-model:value="delimiter"
                        :options="delimiterArray"
                        @update:value="popup.reopen"
                        placeholder="分隔符："
                    />
                    <p v-show="delimiter==='custom'">自定义分隔符：</p>
                    <n-input
                        v-show="delimiter==='custom'"
                        v-model:value="custom"
                        placeholder="自定义分隔符"
                    />
                    <p>拆分位置：</p>
                    <n-select
                        v-model:value="position"
                        :options="positionOptions"
                        @update:value="popup.reopen"
                    ></n-select>
                </div>

                <div v-show="splittingMethod==='characterNumber'">
                    <p>输入要拆分的字符数：</p>
                    <n-input-number
                        v-model:value="number"
                        placeholder="字符数"
                    />
                    <n-radio-group v-model:value="left_right" name="radioGroup">
                        <n-space vertical>
                            <n-radio :value="'left'">
                                一次,尽可能靠左
                            </n-radio>
                            <n-radio :value="'right'">
                                一次,尽可能靠右
                            </n-radio>
                            <n-radio :value="'always'">
                                重复
                            </n-radio>
                        </n-space>
                    </n-radio-group>
                </div>


                <template #footer>
                    <n-space>
                        <n-button @click="getSuperiorData">获取上级节点数据</n-button>
                        <n-button @click="split">拆分</n-button>
                    </n-space>
                </template>
            </n-card>
        </flow-popup-window>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {SplitScreen} from "@vicons/carbon";
import {useElementsStore} from "@/stores/elements";
import workApi from "@/http/workApi";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";

const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    wait: false,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        if (!popup.wait) {
            popup.show = false;
        }
    },
    reopen: () => {
        popup.show = true
    }
})

// 选中列字段
const field = ref(null)
// 拆分方式
const splittingMethodArray = [
    {label: "按分隔符拆分", value: 'delimiter'},
    {label: "按字符数拆分", value: 'characterNumber'},
]
const splittingMethod = ref("delimiter")
// 分隔符拆分--分隔符
const delimiterArray = [
    {label: "冒号", value: ':'},
    {label: "等号", value: '='},
    {label: "逗号", value: ','},
    {label: "分号", value: ';'},
    {label: "空格", value: ' '},
    {label: "自定义", value: 'custom'},
]
const delimiter = ref(":")
const custom = ref("")
const positionOptions = [
    {label:"最右侧", value:"right"},
    {label:"最左侧", value:"left"},
    {label:"重复", value:"always"},
]
const position = ref(positionOptions[0].value)
// 拆分后的新列名组
const newColumnNameArray = ref([])
let antiShake = true
watch([field, delimiter, custom], ([newF, newD, newC]) => {
    if (antiShake) {
        antiShake = false
        setTimeout(() => {
            try {
                console.log(newF);
                console.log(newD)
                console.log(newC)
                console.log(custom.value)
                let a = newD === "custom" ? custom.value : newD
                if (a !== '') {
                    let array = [];
                    let maxNumber = 0
                    for (let i of props.data.data.data) {
                        console.log("@ ", i)
                        array = i[newF].split(a)
                        maxNumber = array.length > maxNumber ? array.length : maxNumber
                    }
                    newColumnNameArray.value = []
                    console.log(maxNumber)
                    console.log(newColumnNameArray.value)
                    if (maxNumber > 6) {
                        maxNumber = 6
                    }
                    for (let i = 0; i < maxNumber; i++) {
                        newColumnNameArray.value.push({columnName: ""});
                    }
                } else {
                    newColumnNameArray.value = []
                }
                antiShake = true
            } catch (e) {
                console.log(e)
                antiShake = true
            }
        }, 1000)
    }

})
// 按位置拆分
const number = ref(0)
const left_right = ref("left")


const split = () => {
    if (splittingMethod.value === 'delimiter') {
        workApi.post("perform_tasks/data_split", {
            data: props.data.data,
            operation: {
                row: {serial_number: []},
                column: {
                    serial_number: [field.value],
                    delimiter: delimiter.value === "custom" ? custom.value : delimiter.value,
                    position: position.value
                }
            }
        }).then(r => {
            props.data.data = r.data
            field.value = null
        });
    } else if (splittingMethod.value === 'characterNumber') {
        workApi.post("perform_tasks/data_split_number", {
            data: props.data.data,
            operation: {
                row: {serial_number: []},
                column: {
                    serial_number: [field.value],
                    left_right: left_right.value,
                    number: number.value
                }
            }
        }).then(r => {
            props.data.data = r.data
            field.value = null
        });
    }
}
const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}
                    props.data.data.title.map(s => {
                        // 移除可修改
                        delete s.render
                        return s
                    })
                    return
                }
            }
        }
    }
}
</script>

<style scoped lang="less">
.n-card {
    width: 400px;

    p {
        margin-top: 20px;
    }
}
</style>
